<script setup defer async lang="ts">
import { reactive, onMounted, ref } from 'vue'
import { API_IMG_URL } from '@/utils/apiUrl'
import { useI18n } from 'vue-i18n'
import { formatDate } from '@/utils/utils'
import { systemMessage, systemMessageDetail, notice } from '@/api/user'
import { useSwipeHandlers } from '@/utils/useSwipeHandlers'

const { t } = useI18n()
const imgUrl = ref(API_IMG_URL())


interface MessageItem {
  ID: number
  title: string
  content: string
  type: number
  status: number
  CreatedAt: string
}

const baseData = reactive({
  type: 0,
  showDetail: false,
  loading: false,
  page: 1,
  dataList: [] as MessageItem[],
  details: {} as MessageItem,
  aircraftUrl: uni.getStorageSync('aircraftUrl'),
})

const getDetial = async (index: number) => {
  if (baseData.type) {
    let params: any = {
      id: baseData.dataList[index].ID,
    }
    
    try {
      const res = await systemMessageDetail(params)
      if (res.code === 0) {
        baseData.showDetail = true
        baseData.details = res.data
        baseData.dataList[index].status = 2
      }
    } catch (error) {
      console.error(':', error)
      uni.showToast({
        title: '',
        icon: 'none',
      })
    }
  } else {
    baseData.details = baseData.dataList[index]
    baseData.showDetail = true
  }
}

const getList = async () => {
  baseData.loading = true
  uni.showLoading({
    title: t('Loading'),
    icon: 'none',
  })
  
  let params: any = {
    page: baseData.page,
    pageSize: 20,
  }
  
  try {
    const res = await systemMessage(params)
    if (res.code === 0) {
      if (res.data.list.length > 0) {
        baseData.dataList = baseData.dataList.concat(res.data.list)
        baseData.page++
      }
    } else {
      uni.showToast({
        title: res.msg,
        icon: 'none',
      })
    }
  } catch (error) {
    console.error(':', error)
    uni.showToast({
      title: '',
      icon: 'none',
    })
  } finally {
    baseData.loading = false
    uni.hideLoading()
  }
}

const getNotice = async () => {
  baseData.loading = true
  uni.showLoading({
    title: t('Loading'),
    icon: 'none',
  })
  
  try {
    const res = await notice()
    if (res.code === 0) {
      if (res.data.length > 0) {
        baseData.dataList = baseData.dataList.concat(res.data)
      }
    } else {
      uni.showToast({
        title: res.msg,
        icon: 'none',
      })
    }
  } catch (error) {
    console.error(':', error)
    uni.showToast({
      title: '',
      icon: 'none',
    })
  } finally {
    baseData.loading = false
    uni.hideLoading()
  }
}

const changTab = (e: any) => {
  console.log(e)
  baseData.dataList = []
  baseData.page = 1
  baseData.type = e.index
  if (baseData.type) {
    getList()
  } else {
    getNotice()
  }
}

const leftClick = () => {
  const pages = getCurrentPages()
  if (pages.length <= 1) {
    history.back()
  } else {
    uni.navigateBack()
  }
}


const handleSwipeRight = () => {
  const pages = getCurrentPages()
  if (pages.length <= 1) {
    history.back()
  } else {
    uni.navigateBack()
  }
}

useSwipeHandlers(handleSwipeRight)

onMounted(() => {
  
  uni.setNavigationBarTitle({
    title: 'Studio ' + t('Earn money so easy') + '!', 
  })
  changTab({ index: 0 })
})
</script>

<template>
  <view class="message-page-container">
    
    <view class="page-bg-decoration">
      <view class="bg-pattern"></view>
    </view>

    
    <view class="page-header">
      <view class="header-content">
        <view class="back-button" @click="leftClick">
          <image class="back-icon" src="../../../static/img/left.png"></image>
        </view>
        <text class="page-title">{{t('Message')}}</text>
        <view class="header-spacer"></view>
      </view>
    </view>

    
    <view class="tabs-section">
      <view class="tabs-container">
        <view 
          class="tab-item" 
          :class="{ active: baseData.type === 0 }"
          @click="changTab({ index: 0 })"
        >
          <text class="tab-text">{{ t('Notification') }}</text>
        </view>
        <view 
          class="tab-item" 
          :class="{ active: baseData.type === 1 }"
          @click="changTab({ index: 1 })"
        >
          <text class="tab-text">{{ t('System Messages') }}</text>
        </view>
      </view>
    </view>

    
    <view class="message-list-section">
      <view class="list-container">
        <view 
          v-for="(item, index) in baseData.dataList" 
          :key="index"
          class="message-item"
          @click="getDetial(index)"
        >
          <view class="item-icon">
            <!-- <image class="icon-image" src="@/static/img/message.png" mode="aspectFit"></image> -->
          </view>

          <view class="item-content">
            <view class="message-title">{{ item.title }}</view>

            <view 
              v-if="baseData.type == 1"
              class="message-preview"
            >
              <rich-text :nodes="item.content ? item.content : '-'"></rich-text>
            </view>
            <view 
              v-if="baseData.type == 0 && item.type == 1"
              class="message-preview"
            >
              <rich-text :nodes="item.content ? item.content : '-'"></rich-text>
            </view>

            <view class="message-time">{{ formatDate(item.CreatedAt) }}</view>
          </view>

          <view class="item-status">
            <view v-show="baseData.type == 1 && item.status == 1" class="unread-indicator"></view>
          </view>
        </view>

        <view v-if="baseData.dataList.length === 0 && !baseData.loading" class="empty-state">
          <view class="empty-icon">
            <img src="@/static/img/empty120.png" mode="aspectFit" />
          </view>
          <view class="empty-text">{{ t('No Messages') }}</view>
        </view>

        <view v-if="baseData.loading" class="list-loading-text">
          {{ t('Loading') }}
        </view>
      </view>
    </view>

    
    <up-popup 
      :show="baseData.showDetail" 
      mode="center" 
      closeable 
      round="0"
      @close="baseData.showDetail = false"
    >
      <view class="detail-container">
        <view class="detail-header">
          <view class="detail-title">{{ baseData.details.title }}</view>
          <view class="detail-time">{{ formatDate(baseData.details.CreatedAt) }}</view>
        </view>
        
        <view class="detail-content">
          <view 
            v-show="baseData.type == 1" 
            class="content-text"
          >
            <rich-text :nodes="baseData.details.content ? baseData.details.content : '-'"></rich-text>
          </view>
          <view 
            v-show="baseData.type == 0 && baseData.details.type == 1" 
            class="content-text"
          >
            <rich-text :nodes="baseData.details.content ? baseData.details.content : '-'"></rich-text>
          </view>
          <up-image
            v-show="baseData.details.type == 2"
            :src="imgUrl + '/' + baseData.details.content"
            mode="widthFix"
            class="content-image"
          ></up-image>
        </view>
      </view>
    </up-popup>
  </view>
</template>

<style lang="scss" scoped>
	@import '@/styles/japanese-minimal-theme.scss';

.message-page-container {
  min-height: 100vh;
  background: #fafafa;
  position: relative;
  overflow: hidden;
  font-family: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif;
}


.page-bg-decoration {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 0;
  
  .bg-pattern {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
      radial-gradient(circle at 20% 80%, rgba(0, 0, 0, 0.02) 0%, transparent 50%),
      radial-gradient(circle at 80% 20%, rgba(0, 0, 0, 0.01) 0%, transparent 50%);
  }
}




.tabs-section {
  position: relative;
  z-index: 1;
  background: #fff;
  border-bottom: 1rpx solid #e0e0e0;
  padding: 20rpx 0;
}

.tabs-container {
  display: flex;
  padding: 0 30rpx;
  background: #f5f5f5;
  border-radius: 0;
  padding: 4rpx;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 20rpx 12rpx;
  border-radius: 0;
  transition: all 0.3s ease;
  cursor: pointer;
  background: transparent;
  
  .tab-text {
    font-size: 28rpx;
    color: #666;
    font-weight: 400;
  }
  
  &.active {
    background: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    
    .tab-text {
      color: #333;
      font-weight: 500;
    }
  }
  
  &:not(.active):active {
    background: rgba(255, 255, 255, 0.5);
  }
}


.message-list-section {
  position: relative;
  z-index: 1;
  flex: 1;
  padding: 30rpx;
}

.list-container {
  width: 100%;
  height: 100%;
}

.message-item {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1rpx solid #e0e0e0;
  border-radius: 0;
  padding: 30rpx 25rpx;
  margin-bottom: 16rpx;
  transition: all 0.3s ease;
  position: relative;
  cursor: pointer;
  
  &:active {
    transform: scale(0.98);
    background: #f8f8f8;
  }
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4rpx;
    height: 100%;
    background: #333;
  }
}

.item-icon {
  width: 60rpx;
  height: 60rpx;
  background: #f5f5f5;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 25rpx;
  flex-shrink: 0;
  
  .icon-image {
    width: 28px;
    height: 28px;
  }
}

.item-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.message-title {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 12rpx;
  line-height: 1.4;
}

.message-preview {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 12rpx;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.message-time {
  font-size: 22rpx;
  color: #666;
  font-weight: 400;
}

.item-status {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40rpx;
  height: 40rpx;
}

.unread-indicator {
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  background: #333;
}

.list-loading-text {
  text-align: center;
  padding: 40rpx 0;
  font-size: 24rpx;
  color: #666;
  font-weight: 400;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120rpx 0;
  margin: 40rpx 20rpx;

  .empty-icon {
    font-size: 120rpx;
    margin-bottom: 30rpx;
    opacity: 0.4;
    color: #64748b;
    filter: grayscale(1);
    
    img {
      width: 80px;
      height: 80px;
    }
  }

  .empty-text {
    font-size: 28rpx;
    color: #64748b;
    font-weight: 500;
    letter-spacing: 1rpx;
  }
}


.detail-container {
  padding: 40rpx 30rpx;
  width: 100%;
  max-width: 400px;
  min-width: 300px;
  box-sizing: border-box;
  background: #fff;
  border: 1rpx solid #e0e0e0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  max-height: 70vh;
  overflow: auto;
}

.detail-header {
  margin-bottom: 30rpx;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
  flex-shrink: 0;
}

.detail-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 12rpx;
  line-height: 1.4;
  word-wrap: break-word;
  font-family: 'Noto Serif JP', serif;
}

.detail-time {
  font-size: 24rpx;
  color: #666;
  font-weight: 400;
}

.detail-content {
  flex: 1;
  overflow-y: auto;
  padding-right: 10rpx;
}

.content-text {
  font-size: 26rpx;
  color: #333;
  line-height: 1.6;
  word-wrap: break-word;
}

.content-image {
  width: 100%;
  max-width: 100%;
  border-radius: 0;
  margin-top: 20rpx;
  border: 1rpx solid #e0e0e0;
}


::v-deep .u-popup__content {
  justify-content: center;
  align-items: center;
  padding: 0 !important;
  background: transparent !important;
}


@media (max-width: 750rpx) {
  .message-list-section {
    padding: 20rpx;
  }
  
  .header-content {
    padding: 0 20rpx;
  }
  
  .tabs-container {
    padding: 0 20rpx;
  }
  
  .detail-container {
    padding: 30rpx 20rpx;
    max-width: 350px;
    min-width: 280px;
  }
}
</style>